<template>
  <!--  短信记录-->
  <Table
      :table-data="tableData"
      :table-column="tableColumn"
      @handleSizeChange="handleSizeChange"
      border
      @handleCurrentChange="handleCurrentChange"
      max-height="500px" :page="page" style="margin-bottom: 10px"
      :header-style="{backgroundColor:'#fffbed'}">
    <template slot="message" slot-scope="{row}">
      <div v-html="row.message"></div>
    </template>
    <template slot="type" slot-scope="{row}">
        <span style="font-size: 14px" :style="{color:row.type === 2 ? '#52c41a' : row.type === 1 ?  '#f51458' :''}">{{formatType(row.type) }}</span>
    </template>
  </Table>
</template>

<script>
import {messageInfo} from '@/api/order'

export default {
  props: ['routesQuery'],
  data() {
    return {
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableColumn: [
        {label: this.$t('手机号码'), prop: 'phone', minWidth: 100},
        {label: this.$t('短信内容'), prop: 'message', slot: 'message', minWidth: 250},
        {label: this.$t('短信接收/发送'), prop: 'type', slot: 'type', minWidth: 100},
        {label: this.$t('时间'), prop: 'sendTime', minWidth: 150},
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {userId, orderId} = this.routesQuery
      const res = await messageInfo({
        userId: parseInt(userId),
        loanRecordId: orderId,
        ...this.page
      })
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list.map(item => {
          item.message = this.signSensitive(item)
          return item
        })
        this.page.total = total
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    },
    formatType(value) {
      const typeObj = {
        0: 'all',
        1: this.$t('接收'),
        2: this.$t('发送'),
        3: this.$t('草稿箱'),
        4: this.$t('发件箱'),
        5: this.$t('失败'),
        6: this.$t('队列'),
      }
      return typeObj[value] || ""
    },
    /**
     *  关键词标红
     *  message 短信内容
     *  sensitiveContent 要标红关键词数组
     */
    signSensitive(value) {
      let {message, sensitiveContent} = value
      if (sensitiveContent && sensitiveContent.length) {
        for (let i = 0; i < sensitiveContent.length; i++) {
          let reg = new RegExp("(" + sensitiveContent[i] + ")", "g")
          message = message.replace(reg, `<font style="color: red">${sensitiveContent[i]}</font>`)
        }
      }
      return message
    }
  }
}
</script>

<style scoped>

</style>
